@charset "utf-8";
@import "common/common";
.active .wen{
                animation-name: bounceInUp;
            }
.active .photo{
    animation-name:bounceIn;
}
.w_web {
    background: url(../images/内页1.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    header {
        .wen {
           padding-top: n(48px);
            margin-left: n(40px);
            span {
                display: inline-block;
                color: white;
                font-size: n(40px);
            }
        }
        .photo {
            text-align: center;
            margin-top: n(40px);
            img {
                width: 45%;
            }
        }
    }
    section {
        position: relative;
        .t_tfboy {
            margin-top: n(60px);
            margin-left: n(96px);
            position: relative;        
            ul {
                line-height: n(100px);
                text-align: left;
                li {
                    background: url(../images/kuang.png) no-repeat 0px/200px;
                    padding-left: n(20px);
//                  border-radius: n(100px);
//                  margin-top: n(90px);
                    font-size: n(40px);
                    img {
                        visibility: hidden;
                    }
                    &:hover {
                        background: url(../images/yellow.png) no-repeat 0px/200px;
                        
                    }
                }
            }
        }
             .d_dog {
            img {
                width: 23%;
                position: absolute;
               bottom: n(-32px);
                right: n(10px);
            }
        }
        .mao{
            
             
            img{
                
               &:nth-of-type(1){
                   position: absolute;
                   bottom: 40px;
                   right: 78px;
                   width: 10%;
                   animation: autoRotate 2s linear  1s infinite;
                   animation-fill-mode: forwards;
               } 
               &:nth-of-type(2){
                   position: absolute;
                   bottom: 70px;
                   right: 80px;
                   width: 10%;
                   animation: autoRotate 2s linear  1.1s infinite;
                   animation-fill-mode: forwards;
               } 
               &:nth-of-type(3){
                   position: absolute;
                   bottom: 97px;
                   right: 78px;
                   width: 12%;
                   animation: autoRotate 2s linear  1.3s infinite;
                   animation-fill-mode: forwards;
               } 
               &:nth-of-type(4){
                   position: absolute;
                   bottom: 115px;
                   right: 70px;
                   width: 14%;
                   animation: autoRotate 2s linear  1.4s infinite;
                   animation-fill-mode: forwards;
               }
               &:nth-of-type(5){
                   position: absolute;
                   bottom: 142px;
                   right: 70px;
                   width: 15%;
                   animation: autoRotate 2s linear  1.6s infinite;
                   animation-fill-mode: forwards;
               }  
            }            
        }
        @keyframes autoRotate{
                0%{
                    opacity: 0;
                }
                to {
                    transform:   translateY(-50px);
                    opacity: 1;
                }
                
            }
    }
}
    @media only screen and (min-height: 0px) and (max-height:556px){
    .w_web section .t_tfboy{
        margin-top: 2%; 
        margin-left: 12%;
    }
    .w_web section .d_dog img{
        bottom: 4%;
        width: 16%;
    }
    .w_web section .mao img:nth-of-type(1){
        right: 12%;
    }
    .w_web section .mao img:nth-of-type(2){
        right: 12%;
    }
    .w_web section .mao img:nth-of-type(3){
        right: 12%;
    }
    .w_web section .mao img:nth-of-type(4){
        right: 12%;
    }
    .w_web section .mao img:nth-of-type(5){
        right: 12%;
    }
    
}
@media only screen and (min-height: 556px) and (max-height:591px) {

    .w_web section .mao img:nth-of-type(1) {
//      right: 12%;
        bottom:4% ;
    }
    .w_web section .mao img:nth-of-type(2) {
//      right: 12%;
        bottom: 18%;
    }
    .w_web section .mao img:nth-of-type(3) {
//      right: 12%;
        bottom: 34%;
    }
    .w_web section .mao img:nth-of-type(4) {
//      right: 12%;
        bottom: 45%;
    }
    .w_web section .mao img:nth-of-type(5) {
//      right: 12%;
        bottom: 60%;
    }
}
 